<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown</title>
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">
</head>
<body>
  <div class="tdesign-demo-wrap tdesign-demo-dropdown">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Dropdown 下拉菜单</h1>
      <p class="tdesign-demo-wrap__info">开发者：terrancewan</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-07-22</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign Dropdown 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 下拉菜单类型 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>
      <p>下拉菜单类型当前只有两种：单层级类型和多层级类型。</p>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block tdesign-demo-block-line">
          <h3>单层级类型</h3>
          <div class="t-dropdown">
            <div class="t-dropdown__column">
              <div class="t-dropdown__item">操作一</div>
              <div class="t-dropdown__item">操作二</div>
              <div class="t-dropdown__split"></div>
              <div class="t-dropdown__item">额外操作三</div>
            </div>
          </div>
        </div>

        <div class="tdesign-demo-block tdesign-demo-block-line">
          <h3>多层级类型</h3>
          <div class="t-dropdown multi-layer">
            <div class="t-dropdown__column">
              <div class="t-dropdown__item">一级操作<i class="t-icon t-icon-arrow-right"></i></div>
              <div class="t-dropdown__item active">一级操作<i class="t-icon t-icon-arrow-right"></i></div>
              <div class="t-dropdown__item">一级操作<i class="t-icon t-icon-arrow-right"></i></div>
              <div class="t-dropdown__item">一级操作<i class="t-icon t-icon-arrow-right"></i></div>
              <div class="t-dropdown__item">一级操作<i class="t-icon t-icon-arrow-right"></i></div>
            </div>
            <div class="t-dropdown__column">
              <div class="t-dropdown__item">二级操作<i class="t-icon t-icon-arrow-right"></i></div>
              <div class="t-dropdown__item hover">二级操作<i class="t-icon t-icon-arrow-right"></i></div>
            </div>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 下拉菜单状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>
      <p>下拉菜单的状态有normal态、hover态、active态、disable态。</p>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->

        <!-- tdesign-demo-block block内容容器，加了上间距 -->
        <div class="tdesign-demo-block tdesign-demo-block-line">
          <div class="t-dropdown">
            <div class="t-dropdown__column">
              <div class="t-dropdown__item">normal态</div>
              <div class="t-dropdown__item t-is-focused">hover态</div>
              <div class="t-dropdown__item">normal态</div>
              <div class="t-dropdown__item t-is-active">active态</div>
              <div class="t-dropdown__item">normal态</div>
              <div class="t-dropdown__split"></div>
              <div class="t-dropdown__item t-is-disable">disable态</div>
              <div class="t-dropdown__item">normal态</div>
            </div>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件大小 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">大小</h2>
      <p>默认高度由内容指定，但不超过380px。</p>
      <div class="tdesign-demo-item__body">
        <div class="tdesign-demo-block tdesign-demo-block-line">
          <div class="t-dropdown">
            <div class="t-dropdown__column">
              <div class="t-dropdown__item">选项1</div>
              <div class="t-dropdown__item">选项2</div>
              <div class="t-dropdown__item">选项3</div>
              <div class="t-dropdown__item">选项4</div>
              <div class="t-dropdown__item">选项5</div>
              <div class="t-dropdown__item">选项6</div>
              <div class="t-dropdown__item">选项7</div>
              <div class="t-dropdown__item">选项8</div>
              <div class="t-dropdown__item">选项9</div>
              <div class="t-dropdown__item">选项10</div>
              <div class="t-dropdown__item">选项11</div>
              <div class="t-dropdown__item">选项12</div>
              <div class="t-dropdown__item">选项13</div>
              <div class="t-dropdown__item">选项14</div>
              <div class="t-dropdown__item">选项15</div>
            </div>
          </div>
        </div>
      </div>

    </div>

</body>
</html>